<template lang="html">
  <div class="hang_xian">
        <ul class="clear">
            <!--精彩航线-->
            <li v-for="item in wonderful ">
              <a>
                <img class="h_img" :src="item.pic">
              </a>
              <a href="" class="h_a">{{item.name}}</a>
            </li>
        </ul>
  </div>
</template>

<script>
export default {
  props:['wonderful']
}
</script>

<style lang="css" scoped>
.hang_xian {
    width: 100%;
    position: relative;
    background-color: #FFF;
}
.hang_xian ul {
    width: 100%;
}
.clear {
    zoom: 1;
}
.hang_xian ul li {
    padding: 10px 0px;
    float: left;
    overflow: hidden;
    width: 25%;
}
.hang_xian ul li a {
    display: block;
    text-align: center;
}
.h_img {
    height: 55px;
    text-align: center;
    display: inline-block;
}
.hang_xian ul li a {
    display: block;
    text-align: center;
}
@media screen and (max-width: 480px){
  .h_a {
      width: 100%;
      font-size: 12px;
      color: #333;
      text-align: center;
      display: block;
  }
}
</style>
